<template>
  <view class="sc-footer">
    <view :class="['sc-footer-content', { fixed }]" :style="[footerContainerStyle]">
      <view :style="[footerContentStyle]" class="sc-footer-content_main">
        <slot></slot>
      </view>
      <view v-if="safeArea" class="sc-footer-safeArea"></view>
    </view>
    <view v-if="fixed" class="sc-footer-placeholder">
      <view :style="[placeholderStyle]" class="sc-footer-placeholder_content"></view>
      <view v-if="safeArea" class="sc-footer-safeArea"></view>
    </view>
  </view>
</template>

<script>

import { backgroundProps, backgroundStyle } from "../../libs/props/background.js";
import { paddingProps, paddingStyle } from "../../libs/props/padding.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";



/**
 * 底部栏组件
 * @property   {Boolean}        fixed           - 是否固定在底部，默认 true
 * @property   {String|Number}  height          - 底部栏高度，默认 100
 * @property   {String}         borderTop       - 顶部边框样式，例如 "1px solid #eee"
 * @property   {String}         shadow          - 阴影效果，例如 "0 -2px 6px rgba(0,0,0,0.1)"
 * @property   {Boolean}        safeArea        - 是否适配底部安全区域，默认 true
 * @property   {String|Number}  zIndex          - 层级，默认 999
 * @property   {String}         ai              - 交叉轴对齐方式，可选值：start/end/center/stretch/baseline，默认 center
 * @property   {String}         jc              - 主轴对齐方式，可选值：start/end/center/between/around/evenly，默认 center
 * @property   {String|Number}  colGap          - 列间距，默认 0
 * @property   {Object}         customStyle     - 自定义样式对象，默认 {}
 * @property   {Object}         paddingProps    - 内边距相关属性
 * @property   {Object}         backgroundProps - 背景相关属性
 */

export default {
  name: "sc-footer",
  mixins: [mpMixin, mixin],
  props: {
    fixed: {
      type: Boolean,
      default: true,
    },
    height: {
      type: [String, Number],
      default: 100,
    },
    borderTop: {
      type: String,
    },
    shadow: {
      type: String,
    },
    safeArea: {
      type: Boolean,
      default: true,
    },
    zIndex: {
      type: [String, Number],
      default: 999,
    },
    ai: {
      type: String,
      default: "center",
    },
    jc: {
      type: String,
      default: "center",
    },
    colGap: {
      type: [String, Number],
      default: 0,
    },
    customStyle: {
      type: Object,
      default: () => ({}),
    },
    ...paddingProps,
    ...backgroundProps,
  },
  computed: {
    footerContainerStyle() {
      return {
        zIndex: this.zIndex,
        backgroundColor: this.$sc.getColor(this.bgColor)
      }
    },
    footerContentStyle() {
      const baseStyle = {
        justifyContent: this.getJustifyContent(),
        alignItems: this.getAlignItems(),
        columnGap: this.$sc.addUnit(this.colGap),
        height: this.$sc.addUnit(this.height),
        borderTop: this.borderTop,
        boxShadow: this.shadow
      };
      return this.$sc.deepMerge(baseStyle, paddingStyle(this), backgroundStyle(this), this.customStyle);
    },
    placeholderStyle() {
      return {
        height: this.$sc.addUnit(this.height)
      };
    }
  },
  methods: {
    // 获取主轴对齐方式
    getJustifyContent() {
      const jcMap = {
        start: "flex-start",
        end: "flex-end",
        center: "center",
        between: "space-between",
        around: "space-around",
        evenly: "space-evenly"
      };
      return jcMap[this.jc] || "center";
    },
    // 获取交叉轴对齐方式
    getAlignItems() {
      const aiMap = {
        start: "flex-start",
        end: "flex-end",
        center: "center",
        stretch: "stretch",
        baseline: "baseline"
      };
      return aiMap[this.ai] || "center";
    }
  }
};
</script>

<style lang="scss" scoped>
.sc-footer {
  &-content {
    width: 100vw;
    background-color: #fff;

    &.fixed {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
    }

    &_main {
      box-sizing: content-box;
      display: flex;
    }
  }

  &-placeholder {
    box-sizing: content-box;
    background-color: transparent;

    &_content {
      width: 100vw;
    }
  }

  &-safeArea {
    width: 100vw;
    height: env(safe-area-inset-bottom);
  }
}
</style>
